<template>
  <div id="chengNuoShu">
    <!-- <div class="title">
        <span style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        </span>
        签订承诺书
      </div>-->
    <div id="toPng" class="checkMan" v-if="!show">
      <div class="title">
        <h2>农村宅基地使用承诺书</h2>
      </div>
      <p style="line-height: 30px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因
        <span class="spanStyle">{{ ChengNuoShuData?.申请理由 }}</span>
        需要，本人申请在
        <span class="spanStyle">{{ ChengNuoShuData?.所属镇 }}</span>
        乡（镇、街道） <span class="spanStyle">{{ ChengNuoShuData?.所属村 }}</span
        >行政村 <span style="text-decoration: line-through">自然村</span>使用宅基地建房，现郑重承诺：
      </p>
      <p style="text-align: left; margin-left: 4px; line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1.本人及家庭成员符合“一户一宅” 申请条件，申请材料真实有效;</p>
      <p style="text-align: left; margin-left: 4px; line-height: 30px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.宅基地和建房申请经批准后，我将严格按照批复位置、面积、住房风貌和高度动工建设，在批准后24个月内建成;
      </p>
      <p style="text-align: left; margin-left: 4px; line-height: 30px">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.涉及旧房处置的（含附房），承诺在旧房拆除，或交还村集体、调剂给其他村民处理到位后再申请放样。
      </p>
      <p style="text-align: left; margin-left: 4px; line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如有隐瞒或未履行承诺，本人愿承担一切经济和法律责任。</p>
      <p style="text-align: right; margin-right: 83px; font-weight: 800; font-size: 16px">
        承诺人：
        <span @click="showPopup" v-if="!resultImg" style="width: 40px; height: 10px">点击签字</span>
        <img @click="showPopup" class="imgSrv" v-if="resultImg" :src="resultImg" alt />
      </p>
      <p style="text-align: right; margin-right: 34px; font-weight: 800; font-size: 16px">时间：{{ time }}</p>
    </div>
    <div v-if="!show">
      <van-cell v-show="false" @click="showPopup">点击签字</van-cell>
      <div style="width: 100vw; padding-bottom: 20px; display: flex; justify-content: center">
        <van-button class="button3" @click="showPopup">点击签字</van-button>
        <van-button class="button3" @click="handleCreateHtmlPdf">下一步</van-button>
        <van-button class="button3" @click="goback">返回上一步</van-button>
      </div>
    </div>

    <div v-if="show">
      <!-- <van-popup closeable v-model="show" style="height: 80%; width: 80%"> -->
      <div class="bottom">
        <vue-esign ref="esign" :width="esignWith" :height="esignHeight" class="mySign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
        <!-- <div class="qianzi" style="color:#ddd" v-show="isShowValue">签字区域</div> -->
      </div>
      <div class="dialog-footer">
        <van-button plain style="width: 45vw" @click="handleReset" type="info">重签</van-button>
        <van-button plain style="width: 45vw" @click="handleGenerate" type="info">确定</van-button>
      </div>
      <!-- </van-popup> -->
    </div>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import Vue from 'vue'
import { dataTransFile, dataTransFilePreview, FileServerProxy } from '@/utils/api'
import { Toast } from 'vant'
import { preventReClick } from '@/utils/plugins'
Vue.use(preventReClick)
export default {
  name: 'chengNuoShu',
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      esignWith: 800,
      esignHeight: 1500,
      lineWidth: 6, // 画笔的线条粗细
      lineColor: '#000000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      resultImg: '', // 最终画布生成的base64图片
      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      time: '',
      //   heightE: '200',
      title: '改、 扩、翻建',
      title1: '杭州市临安区青山湖街道孝村村６组孝村２５－１号',
      data1: [],
      data2: '',
      formData: [
        {
          buildtypeName: ''
        }
      ],
      isShowValue: true,
      show: false,
      resultFile: ''
    }
  },
  props: {
    ChengNuoShuData: {
      type: Object
    }
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset()
      this.isShowValue = false
    },
    showPopup() {
      this.show = true
      console.log(this.show)
      //    setTimeout(() => {
      //   this.isShowValue = false
      // }, 1500)
    },
    handle() {},
    // 生成签字图
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res
          console.log(res)
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
        })
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      }, 200)
      this.show = false
    },
    goback() {
      this.$parent.isshowChengnuoshu = false
    },
    DownloadPhoto() {
      this.getToPng('toPng', '承诺书.png')
    },
    //先使用插件生成图片
    handleCreateHtmlPdf() {
      // PubSub.publish('SaveData', '1')
      // this.handleGenerate();

      if (this.resultImg == '') {
        this.$toast.fail('请签名!')
      } else {
          //上传文件
          this.DownloadPhoto()
        // this.getToPng('toPng', '承诺书.png')
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.isShowValue = false
    }, 1500)
    // this.data1 = this.$route.query.data2
    this.data2 = this.$route.query.data1
    //   this.formData = this.$route.query.formData
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '签订承诺书'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  },
  created() {
    var date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' //表示当前日期
  }
}
</script>

<style lang="scss" scoped>
#chengNuoShu {
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
  height: 100vh;
  position: relative;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  overflow: auto;

  .spanStyle {
    text-decoration: underline;
  }

  pre {
    white-space: pre-wrap;
    /*css-3*/
    white-space: -moz-pre-wrap;
    /*Mozilla,since1999*/
    white-space: -pre-wrap;
    /*Opera4-6*/
    white-space: -o-pre-wrap;
    /*Opera7*/
    word-wrap: break-word;
    line-height: 34px;
  }

  .checkMan {
    // border: 1px solid #e9e9e9;
    padding-top: 4px;
    padding: 10px;

    .title {
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
    }

    .el-button {
      margin-bottom: 20px;
    }

    img {
      width: 15%;
      //   height: 80px;
    }
  }

  .imgSrv {
    margin-left: 20px;
    transform: rotate(270deg);
  }

  .button2 {
    width: 50%;
    background: #007aff;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    // margin: 0 10px;
  }

  .button3 {
    width: 50%;
    background: #007aff;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    margin: 0 10px;
  }

  .bottom {
    position: relative;
    height: 92vh;
    // bottom: 40px;
    // .qianzi {
    //   width: 100px;
    //   position: relative;
    //   transform: rotate(90deg);
    //   font-size: 44px;
    //   // top: 124px;
    //   left: 35%;
    //   top: -50%;
    // }
    // border-top: 1px solid #000;
  }

  .dialog-footer {
    //   position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-around;
    //   left: 38px;
    //   top: 37%;
    //   transform-origin: left 50%;
    //   transform: rotate(90deg);
  }
}

.el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
  }
}
</style>
